<template>
  <div id="app">

    <div class="calendar"
      ref="calendar"
      @touchstart="touchStart"
      @touchend="touchEnd"
      @touchmove.stop.prevent="touchMove">
      <div class="header">
        <div>
          <span>《 </span>
          <span @click="preMonth">〈</span>
        </div>
        <div>
          {{headerDate.year}}年{{headerDate.month}}月
        </div>
        <div>
          <span @click="nextMon">〉</span>
          <span>》 </span>
        </div>
      </div>
      <ul class="week">
        <li v-for="list in weekArr"
          class="week-item"
          :key="list">{{list}}</li>
      </ul>
      <ul class="date">
        <li v-for="(list,index) in dateArr"
          :key="index"
          class="date-item"
          :class="{actived:list.isSelected?true:false}"
          @click="selectdate(list)">{{list.day}}</li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      weekArr: ['日', '一', '二', '三', '四', '五', '六'],
      dateArr: [],
      selectDate: '',
      headerDate: '',

      allDateArr: [],
      isSelectedCurrentDate: false,//是否点选的当前的日期
      translateIndex: 0,//轮播所在的位置
      transitionDuration: 0.3,//动画持续的时间


      needAnimation: true,
      isTouching: false,
      touchStartPositionX: 0,
      touchStartPositionY: 0,
      touch: {
        x: 0,
        y: 0
      }

    }
  },
  watch: {
    dateArr: {
      handler(val) {
        this.changeAlldate(val)
      },
      deep: true
    }
  },
  mounted() {
    this.getCurrentDay()
  },
  methods: {
    //今天
    getCurrentDay() {
      this.selectDate = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate()
      }
      this.headerDate = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate()
      }
      this.dateArr = this.getMonthDate(this.selectDate)
    },
    //每月日期
    getMonthDate(date) {
      console.log(date);
      const { year, month, day } = date
      let dateArr = []
      let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      // r闰年处理
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 == 0) {
        daysInMonth[1] = 29
      }
      const monthStartWeekDay = new Date(year, month - 1, 1).getDay()
      const monthEndWeekDay = new Date(year, month, 1).getDay()

      // 空数据填充
      for (let i = 0; i < monthStartWeekDay; i++) {
        dateArr.push({
          type: 'pre',
          day: '',
          month: '',
          year: ''
        })
      }

      // 开始填充日期数据
      for (let i = 0; i < daysInMonth[month - 1]; i++) {
        dateArr.push({
          type: 'normal',
          day: i + 1,
          month,
          year,
          isSelected: Number(day) === i + 1 && Number(month) === this.selectDate.month && Number(year) === this.selectDate.year
        })
      }



      // 尾部空数据填充
      for (let i = 0; i < 6 - monthEndWeekDay; i++) {
        dateArr.push(
          {
            type: 'next',
            day: '',
            month: '',
            year: ''
          }
        )
      }
      return dateArr
    },

    //选中某一天
    selectdate(date) {
      if (date.type !== 'normal') return ''
      this.dateArr.findIndex(value => {
        value.isSelected ? value.isSelected = false : void 0
      })
      this.selectDate.day = date.day
      date.isSelected = true
    },

    // 舰艇dateArr变化
    changeAlldate() {
      // if (this.isSelectedCurrentDate) return
      // const pre
    },

    // 上个月
    preMonth() {
      if (this.headerDate.month === 1) {
        this.headerDate.year--
        this.headerDate.month = 12
      } else {
        this.headerDate.month--
      }
      this.dateArr = this.getMonthDate(this.headerDate)
    },

    // 下个月
    nextMon() {
      if (this.headerDate.month === 12) {
        this.headerDate.year++
        this.headerDate.month = 1
      } else {
        this.headerDate.month++
      }
      this.dateArr = this.getMonthDate(this.headerDate)
    },

    // 上一年
    preYear() {
      if (this.headerDate.year <= 1970) return ''
      this.dateArr = this.getMonthDate(this.headerDate)
    },

    // 下一年
    nextYear() {
      this.headerDate.year--
      this.dateArr = this.getMonthDate(this.headerDate)
    },

    // 移动端
    touchStart(e) {
      // console.log('开始', e);
      this.isTouching = true
      this.touchStartPositionX = e.touches[0].clientX
      this.touchStartPositionY = e.touches[0].clientY
    },

    touchEnd(e) {
      console.log('结束', e)
    },

    touchMove(e) {
      console.log('移动', e);
    }

  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.calendar {
  width: 100%;
  overflow-x: hidden;
  padding: 0 10px;
  box-sizing: border-box;
}
.header {
  width: 90%;
  margin: 10px auto;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.week,
.date {
  width: 100%;
  display: flex;
}
.week-item {
  flex-grow: 0;
  flex-shrink: 0;
  /* flex-basis: 14.285%; */
  /* flex: 0 0 14.285%; */
  flex: 1;
}

.date {
  flex-wrap: wrap;
}
.date-item {
  flex: 0 0 14.285%;
  cursor: pointer;
}

.week-item,
.date-item {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  font-size: 18px;
  font-weight: 500;
}

.date-item.actived {
  background-color: #2c3e50;
  color: aliceblue;
  border-radius: 5px;
}
</style>
